/*
 * @Author: Yejing
 * @Date: 2023-06-10 10:11:17
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 10:31:19
 * @Description: desc
 */
<template>
	<view>
		<c-navigation-bar :bgColor='true' :title="search.title" :navType='search.navType' :disabled='false' leftIcon='back'
			:navPlaceholder='search.navPlaceholder' :navThmen='search.navThmen' @searchEvent='searchEvent'
			@inputEvent='inputEvent' class="search">
		</c-navigation-bar>
		<!-- 占位 -->
		<view class="slot" />
		<u-tabs :list="list" :current="current" @change="change"></u-tabs>
		<view class="content">
			<view class="item" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.imgUrl" mode=""></image>
					<u-icon class="play" name="play-circle-fill" size="40rpx" color="white"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: {
					navThmen: 'line',
					navPlaceholder: this.$t('searchInfo.keywordQuery'),
					navType: 'search'
				},
				// tabList
				list: [{
					name: 'Shops'
				}, {
					name: 'Activity'
				}, {
					name: 'Anchor',
				}],
				current: 0,
				goodsList: [{
						imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Ffa4566f3-e525-4e21-a354-9edc70107a9c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687067416&t=8e59cb8ca571b31172120df9c22baab0"
					},
					{
						imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F51fc1060-5058-4f82-9777-98fa6f33d0b1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687067416&t=a2fac82465a93fa35c444de26ea02f05"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
					{
						imgUrl: "https://img2.baidu.com/it/u=1750846771,3754011515&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500"
					},
				]
			};
		},
		methods: {
			// 标签页更换标签事件
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: calc(50rpx + var(--status-bar-height));
	}

	.slot {
		height: 230rpx;
	}

	.content {
		margin-top: 50rpx;
		display: grid;
		grid-template-columns: repeat(3, 30%);
		justify-content: space-evenly;
		row-gap: 18rpx;

		.item {
			height: 30vw;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
			}
			.play{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
		}
	}

	// /deep/  .u-scroll-box .u-tab-bar {
	// 	width: 80rpx !important;
	// 	transform: translate(30rpx,-100%) !important;
	// 	transition-duration: 0.5s !important;
	// }
</style>